<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--timeline-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">-->



<link rel="stylesheet" th:href="@{/assets/css/mystyle.css}">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>


<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>


<style>
    .container span.number span:first-child{
        top: 100px;
    }
</style>

<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">
        <!-- 文章遍历并分页展示 -->
        <div th:each="article: ${articles}" th:if="${isArchive} eq null or ${isArchive} eq ''">
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" th:src="@{${commons.show_thumb(article)}}"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color" style="font-size: 15px;"><a
                            th:text="${article.getCategories()}"></a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"/>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" th:href="${commons.permalink(article.id)}" target="_blank"
                                th:utext="${article.title}"/>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <div style="font-size: 16px;" th:utext="${commons.intro(article,75)}"/>
                </div>
            </article>
        </div>

<!--        文章分页信息-->
        <div class="am-pagination" th:if="${isArchive} eq null or ${isArchive} eq ''">
            <nav aria-label="Page navigation">

                <!--                分成三个ul class="pagination" ，一个是上一页 ，一个是th：each遍历 ，一个是下一页-->
                <ul class="pagination">

                    <li th:if="${pageInfo.pageNum!=1}">
                        <a th:href="@{'/page/'+${pageInfo.pageNum-1}}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li th:if="${pageInfo.pageNum==1}" class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </ul>

                <ul class="pagination" th:each="index:${#numbers.sequence(pageInfo.pageNum, pageInfo.pageNum+7)}" th:if="${pageInfo.getPages()>=7}">
                    <li th:if="${pageInfo.pageNum==index} and ${index<=pageInfo.pages}" class="active"><a th:href="@{'/page/'+${index}}"
                                                                             th:text="${index}"></a></li>
                    <li th:if="${pageInfo.pageNum!=index} and ${index<=pageInfo.pages}"><a th:href="@{'/page/'+${index}}" th:text="${index}"></a>
                    </li>

                </ul>

                <ul class="pagination" th:each="index:${#numbers.sequence(1, pageInfo.getPages())}" th:if="${pageInfo.getPages()<7}">
                    <li th:if="${pageInfo.pageNum==index}" class="active"><a th:href="@{'/page/'+${index}}"
                                                                             th:text="${index}"></a></li>
                    <li th:if="${pageInfo.pageNum!=index}"><a th:href="@{'/page/'+${index}}" th:text="${index}"></a>
                    </li>

                </ul>

                <ul class="pagination">
                    <li th:if="${pageInfo.pageNum!=pageInfo.pages}">
                        <a th:href="@{'/page/'+${pageInfo.pageNum+1}}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li th:if="${pageInfo.pageNum==pageInfo.pages}" class="disabled">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>

            </nav>
        </div>


<!--        archive-->

        <div class="container" th:if="${isArchive} eq 'true'">
            <ul th:each="map:${archiveMap}" style="padding: 1px 30px;">
                 <span class="number" th:style="'color: '+${cssUtil.randomCssColor()} +';'+'font-size: '+ '20px;'+'font-weight:'+'bold;'">
                        <span style="font-size: 18px;" th:text="${map.key}"></span> <span></span>
                    </span>
                <li th:each="article:${map.value}" style="border-radius: 60px;width: 600px;">
<!--                    <span></span>-->
                    <div>
                        <a th:href="${commons.permalink(article.id)}" target="_blank" class="title" th:utext="${article.getTitle()}" th:style="'color: '+${cssUtil.randomCssColor()} +';'+'font-size: '+ '20px;'+'font-weight:'+'bold;'"></a>
                        <div class="info" th:utext="${commons.intro(article,75)}" th:style="'color: '+${cssUtil.randomCssColor()} +';'+'font-size: '+ '20px;'+'font-weight:'+'bold;'"></div>
<!--                        <div class="type" th:style="'color: '+${cssUtil.randomCssColor()} +';'+'font-size: '+ '20px;'+'font-weight:'+'bold;'">Prensetation</div>-->
                    </div>
<!--                    <span class="number" th:style="'color: '+${cssUtil.randomCssColor()} +';'+'font-size: '+ '20px;'+'font-weight:'+'bold;'">-->
<!--                        <span style="font-size: 18px;" th:text="${map.key}"></span> <span></span>-->
<!--                    </span>-->
                </li>

            </ul>
        </div>






    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title" th:if="${userDetail} ne null">
                <span th:text="${userDetail.getBlogName()}"></span>
            </h2>
            <h2 class="blog-text-center blog-title" th:if="${userDetail} eq null">
                <span>游客</span>
            </h2>
            <img width="200px" height="200px"
                 th:if="${userDetail} eq null or ${userDetail.getIcon()} eq '' or ${userDetail.getIcon()} eq null  "
                 th:src="@{/user_img/user_default.jpg}" alt="about me" class="blog-entry-img"/>
            <img width="200px" height="200px"
                 th:if="${userDetail} ne null and  ${userDetail.getIcon()} ne '' and  ${userDetail.getIcon()} ne null"
                 th:src=" ${userDetail.getIcon()}" alt="about me" class="blog-entry-img"/>

            <p th:if="${userDetail} ne null">
                <span th:text="${userDetail.getJob()}"></span>
            </p>
            <p th:if="${userDetail} eq null">
                <span>请登录</span>
            </p>

            <p th:if="${userDetail} ne null">
                <span th:text="${userDetail.getDetail()}"></span>
            </p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p th:if="${userDetail} eq null">
                <a th:href="@{https://github.com/}" target="_blank"><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a th:href="@{https://weibo.com/}" target="_blank"><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
            <p th:if="${userDetail} ne null">
                <a th:href="@{${userDetail.getGithub()}}" target="_blank"><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a th:href="@{${userDetail.getWeibo()}}" target="_blank"><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>


    <!-- 阅读排行榜 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
            <div style="text-align: left">
                <th:block th:each="articleOrder :${articleOrders}">
                    <a style="font-size: 15px;" th:href="@{'/article/'+${articleOrder.id}}" target="_blank"
                       th:text="${articleOrderStat.index+1}+'、'+${articleOrder.title}+'('+${articleOrder.statistic.hits}+')'">
                    </a>
                    <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem"/>
                </th:block>
            </div>
        </div>
    </div>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">友情链接</h4>
                </div>
                <div class="modal-body">
<!--                    内容-->
                    <p th:each="link:${links}" th:utext="'<a href='+${link.getLink()}+' target='_blank' >'+${link.getTitle()}+'</a>'">
                    </p>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>

<script>




</script>


</html>
